
//  页面头部组件
<template>
  <el-header height="60px">
    <el-row class="flex">
      <el-col :span="3" class="logo-box flex flex-vc">
        <i class="fa fa-cloud" aria-hidden="true"></i>
        <span class="logo-text">微云客</span>
      </el-col>
      <el-col :span="21">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo flex"
          mode="horizontal"
          text-color="#fff"
          active-text-color="#fff"
          @select="handleSelect"
          :router="true"
        >
          <el-menu-item index="/">
            <i class="fa fa-jpy money" aria-hidden="true"></i>
            <span slot="title">收银</span>
          </el-menu-item>
       
        </el-menu>
      </el-col>
    </el-row>
  </el-header>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "/"
    };
  },
  created() {
    // 组件创建完后获取数据
    this.fetchNavData();
  },
  methods: {
    handleSelect(index) {
      this.activeIndex = index;
    },
    fetchNavData() {
      // 初始化菜单激活项
      let cur_path = this.$route.path; //获取当前路由
      let routers = this.$router.options.routes; // 获取路由对象
      let nav_name = "",
        nav_path = "/";
      for (var i = 0; i < routers.length; i++) {
        let children = routers[i].children;
        if (children) {
          for (let j = 0; j < children.length; j++) {
            if (children[j].path === cur_path) {
              nav_name = routers[i].name;
              nav_path = routers[i].path;
              break;
            }
          }
        }
      }
      this.$store.state.leftNavState = nav_name;
      this.activeIndex = nav_path;

    }
  },
  mounted() {},
  watch: {
    $route: function(to, from) {
      // 路由改变时执行
      //console.info("to.path:" + to.path);
      this.fetchNavData();
    }
  }
};
</script>

<style scoped>
.logo-box {
  font-size: 18px;
  font-weight: bold;
  white-space: nowrap;
  text-align: left;
}
.logo-box i {
  font-size: 40px;
  color: #409eff;
  font-weight: 900;
  margin-right: 10px;
}

.el-header {
  background: #2e334f;

  color: #ffffff;
  line-height: 60px;
}
.el-menu {
  background-color: transparent !important;
}
.el-menu.el-menu--horizontal {
  border: none;
}

.el-menu--horizontal > .el-menu-item:hover,
.el-menu--horizontal > .el-menu-item.is-active {
  background-color: #1b1e2e!important;
}
.el-menu-item {
  font-size: 16px;
  font-weight: bold;
  padding: 0 35px;
}
.el-menu-item i {
  margin-right: 6px;
  font-weight: bolder;
}
.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: 4px solid #409eff !important;
}
</style>
